import './App.scss';
import {HashRouter, Route, Switch, Redirect} from "react-router-dom";
import {Layout} from 'antd'

import MyContent from "./pages/MyContent"
import MyHeader from "./components/MyHeader"
import Login from "./pages/Login";
import Register from "./pages/Register";
import NoMatch from './pages/NoMatch'
import {createContext, useState} from "react";

const RedirectAs404 = ({ location }) => <Redirect to={Object.assign({}, location, { state: { is404: true } })} />

const myLoadingContext = createContext()

function App() {

  const [load, setLoad] = useState(0)

  return (
    <myLoadingContext.Provider value={{load, setLoad}}>
      <HashRouter>
        <Layout className="layout">
          <MyHeader/>

          <Route render={({location}) => (
            location.state && location.state.is404
              ? <NoMatch /> :
              <Switch>
                <Route exact path="/"><Login state={"text"}/></Route>
                <Route path="/main"><MyContent/></Route>
                <Route path="/register"><Register/></Route>
                <Route component={RedirectAs404}/>
              </Switch>
          )}/>

        </Layout>
      </HashRouter>
    </myLoadingContext.Provider>
    

  );
}

export {App, myLoadingContext};
